<template>
  <div>
    <tab :idx="4"></tab>
    <div class="app-container">
      <div class="section">
        <el-form ref="form"  :model="integralList"   :inline="true" class="add">
          <el-form-item label="会员每消费">
            <el-input v-model="integralList.costMoney" placeholder="请输入" />
          </el-form-item>
          <span class="yuan">元，</span>
          <el-form-item label="送">
            <el-input v-model="integralList.integral" placeholder="请输入" />
          </el-form-item>
          <span class="yuan">积分</span>
<!--          <el-table-column label="操作" align="center">-->
<!--            <template slot-scope="scope">-->
<!--              <el-button size="mini" plain class="del" @click="del"> 删除</el-button>-->
              <el-button size="mini" plain class="modify" @click="updateIntegral"> 修改</el-button>
<!--            </template>-->
<!--          </el-table-column>-->

<!--          <el-form-item class="mar39">-->
<!--            <el-switch v-model="value" active-color="#13ce66" inactive-color="#CAAB62" inactive-text="开启">-->
<!--            </el-switch>-->
<!--          </el-form-item>-->
        </el-form>

<!--        <p class="title">积分概况</p>-->
<!--        <el-table v-loading="loading" :data="commodityList" >-->
<!--          <el-table-column type="selection" width="55" align="center" />-->
<!--          <el-table-column label="积分总额" align="center" prop="total" >-->
<!--            <template slot-scope="scope">-->
<!--          <span class="total">{{ scope.row.total}}</span>-->
<!--        </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="可用积分" align="center" prop="price" />-->
<!--        <el-table-column label="获取积分" align="center" prop="status"  />-->
<!--          <el-table-column label="数量" align="center" prop="id" >-->
<!--            <template slot-scope="scope">-->
<!--          <span :class="scope.row.num>0?'straight':'burden'">{{ scope.row.num}}</span>-->
<!--        </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="消耗积分" align="center" prop="id" />-->
<!--          <el-table-column label="途径" align="center" prop="id" />-->
<!--          <el-table-column label="日期" align="center" prop="date" />-->

<!--        </el-table>-->
<!--        <div class="txtcenter">-->
<!--          <el-pagination :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"-->
<!--            layout="total, sizes, prev, pager, next, jumper" :total="400">-->
<!--          </el-pagination>-->
<!--        </div>-->
      </div>

    </div>




  </div>
</template>

<script>

import tab from '../../tool/common'
import {Integral,updateIntegral,delIntegral} from "@/api/mahjong/integral";
export default {
  name: "Commodity",
  components: { tab },
  data() {

    return {
      form: {

      },

      costList:[],
      integralList:[],
      commodityList: [{
        total:'234',
        price:'2',
        status:'89',
        id:'99',
        num:'9',
        date: '2099-09-09  09:00:14'

      }, {
        total:'234',
        price:'2',
        status:'89',
        id:'99',
        num:'-9',
        date: '2099-09-09  09:00:14'


      }, {
        total:'234',
        price:'2',
        status:'89',
        id:'99',
        num:'-98',
        date: '2099-09-09  09:00:14'


      }, {
        total:'234',
        price:'2',
        status:'89',
        id:'99',
        num:'+29',
        date: '2099-09-09  09:00:14'


      }]

    };
  },
  created() {
    this.getIntegralList();
  },
  methods: {
    /** 查询积分赠送 */
    getIntegralList() {

      Integral().then(response => {
        this.integralList = response.data;
        // this.total = response.total;
        // this.loading = false;
      });
    },
    /** 修改积分赠送 */
    updateIntegral() {
      updateIntegral(this.integralList).then(response => {
        this.udateInfo = response.rows;
      }).then(() => {
        this.msgSuccess("修改成功");
        this.getIntegralList();
      }).catch(function() {});;
    },
  }

};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.section {
  background-color: #fff;
  min-height: calc(100vh - 84px);
  padding-bottom: 30px;
  .add {
    padding: 20px 20px 0;
  }

  .yuan {
    position: relative;
    top: 9px
  }

  .mar39 {
    margin-left: 50px;
  }
  .total{
    color: #CAAB62;
  }
  .straight{
    color: #67C23A;
  }
  .burden{
    color: #C23A3A;
  }
  .title {
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 18px;
    color: #201D1B;
    position: relative;

    &::before {
      display: block;
      background-color: #CAAB62;
      width: 4px;
      height: 22px;
      content: '';
      position: absolute;
      left: 20px;
      top: 0px;
    }



  }
  .txtcenter{
    text-align: center;
    margin-top: 20px;
  }
}
</style>
